<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    function login() {
        let json = {}
        let user = document.getElementById("user").value;
        json["user"] = user;
        json["password"] = document.getElementById("password").value;
        if (json["user"] === "" || json["password"] === "") {
            alert("'User' and 'Password' can not be empty!");
            return;
        }
        json = JSON.stringify(json);
        $.ajax({
            type: "POST",
            url: "/login",
            contentType: "application/json",
            dataType: "json",
            data: json,
            success: function (data) {
                data = JSON.stringify(data);
                data = JSON.parse(data);
                if (data["status"] === true) {
                    alert("Login success. Welcome!");
                    localStorage.setItem("user", user);
                    location.href = "/home.html";
                } else {
                    alert("Login failed. Please check your username and password!");
                }
            },
            error: function () {
                alert("Server response failed.");
            }
        })
    }

    function switch_register() {
        location.href = "/register.html";
    }

    $(document).keyup(function (e) {
        let key = e.which;
        if (key === 13) {
            login();
        }
    });
</script>
<style>
    html, body {
        height: 100%;
        margin: 0;
    }

    .footer {
        text-align: center;
        position: absolute;
        bottom: 175px;
        left: 0;
        right: 0;
    }

    .login-box {
        width: 350px;
        height: 225px;
        text-align: center;
        background: linear-gradient(blue, blue) left top,
        linear-gradient(blue, blue) left top,
        linear-gradient(blue, blue) right top,
        linear-gradient(blue, blue) right top,
        linear-gradient(blue, blue) left bottom,
        linear-gradient(blue, blue) left bottom,
        linear-gradient(blue, blue) right bottom,
        linear-gradient(blue, blue) right bottom;
        background-repeat: no-repeat;
        background-size: 1px 24px, 24px 1px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    .title-split {
        clear: left;
        float: left;
        width: 60px;
        height: 35px;
    }

    .title {
        float: left;
        width: 75px;
        height: 35px;
        text-align: left;
    }

    .input {
        float: left;
        width: 175px;
        height: 35px;
        text-align: left;
    }

    .button {
        float: left;
        width: 70px;
        height: 20px;
    }
</style>
<body>
<div class="login-box">
    <header class="login-header">
        <h2>Login</h2>
    </header>
    <div class="login-form">
        <div class="title-split"></div>
        <div class="title">
            <label for="user">User</label>
        </div>
        <div class="input">
            <input id="user" name="user" placeholder="user">
        </div>

        <div class="title-split"></div>
        <div class="title">
            <label for="password">Password</label>
        </div>
        <div class="input">
            <input type="password" id="password" name="password" placeholder="password">
        </div>

        <div style="clear: left;width: 275px;height: 10px"></div>
        <div style="float: left;width: 90px;height: 25px;"></div>
        <button onclick="login()" class="button">Login</button>
        <div style="float: left;width: 50px;height: 20px;"></div>
        <button onclick="switch_register()" class="button">Register</button>
    </div>
</div>
<div class="footer">
    <a href="http://qph-coding.com">Blog: http://qph-coding.com</a>
</div>

</body>
</html>